import './index.scss';

export default {
  name: "AElTable",
  props: {
    margin: { type: String, default: "0" },
    padding: { type: String, default: "0" },
    data: { type: Array, default: () => [] },
    columns: { type: Array, default: () => [] },
    card: { type: Boolean, default: true }, // 是否需要卡片
    cardProps: { Object, default: () => ({ bodyStyle: { padding: 0 } }) },
    aligning: { type: String, default: "center" },
    border: { type: Boolean, default: true },
  },
  methods: {
    /**
     * 格式化数据，数据转为dom
     */
    formater(data = []) {
      // 获取props数据
      let { aligning = "center" } = this;
      return (
        data.map(({ prop = null, children = [], render = null, ...rest }) => {
          if (children.length) {
            return <el-table-column align={aligning} prop={prop} props={rest} >{this.formater(children)}</el-table-column>;
          } else {
            if (render) {
              return (<el-table-column align={aligning} prop={prop} props={rest} >{scope => render(scope, prop, rest)}</el-table-column>)
            } else {
              return <el-table-column align={aligning} prop={prop} props={rest} ></el-table-column>
            }
          }
        })
      )
    },
    /**
     * 是否需要卡片
     */
    isCard() {
      // 获取props实例数据
      let { data = [], columns = [], card = true, cardProps = {}, border = true, margin = null, padding = null } = this;

      // 获取方法
      let { formater = () => null } = this;

      // 获取事件集
      let { $listeners } = this;

      // 获取插槽
      let { pagination } = this.$slots;


      if (card) {
        return (
          <el-card class="box-card" props={cardProps}>
            <el-table border={border} header-cell-class-name="header-row" style={{ margin, padding }} props={this.$attrs} data={data} on={$listeners}>{formater(columns)}</el-table>
            {pagination}
          </el-card>
        )
      } else {
        return (
          <div class="whole">
            <el-table border={border} header-cell-class-name="header-row" style={{ margin, padding }} props={this.$attrs} data={data} on={$listeners}>{formater(columns)}</el-table>
            {pagination}
          </div>
        )
      };
    }
  },
  render() {

    // 获取方法
    let { isCard = () => null } = this;

    return (<div class="a-el-table">{isCard()}</div>)
  }
}